<script setup>
import { computed } from 'vue';
import { useStore } from 'vuex';

const store = useStore();
//通知
// const latestNotices = computed(() => store.state.getNotice.notifications.slice(0, 10));
const notifications = computed(() => store.getters['getNotice/getNotifications']);
const getLatestNotices = () => {
  // // 可以根据需要刷新 latestNotices 的数据，这里简化为显示最新10条
  // console.log('Latest notices:', notifications.value);
  console.log('lllllllllllllllllll',notifications)
};


//活动
// const latestActs = computed(() => store.state.getAct.actifications.slice(0, 10));

const actifications = computed(() => store.getters['getAct/getActifications']);
const getLatestActs = () => {
  // 可以根据需要刷新 latestNotices 的数据，这里简化为显示最新10条
  console.log('Latest notices:', latestNotices.value);
};
</script>

<template>
  <div class="wrapper">
    <!-- 左侧学校通知信息表格 -->
    <div class="left-column">
      <h1 style="text-align: center">学校通知信息</h1>
      <table class="info-table1">
        <tr>
          <th>通知</th>
        </tr>
        <tr>
          <td>寒假时间为12月20日至1月10日</td>
        </tr>
        <tr>
          <td>家长会将于9月20日举行</td>
        </tr>
        <tr v-for="data in notifications" :key="data.id">
          <td>{{ data.title }} : {{ data.content }}</td>
        </tr>
      </table>
    </div>

    <!-- 右侧学校活动信息表格 -->
    <div class="right-column">
      <h1 style="text-align: center">学校活动信息</h1>
      <table class="info-table2">
        <tr>
          <th>活动</th>
        </tr>
        <tr>
          <td>校音乐会将在礼堂举行，欢迎家长参加</td>
        </tr>
        <tr>
          <td>书法比赛将在书法教室举行，请携带毛笔</td>
        </tr>
        <tr v-for="data in actifications" :key="data.id">
          <td>{{ data.title }} : {{ data.description }}</td>
        </tr>
      </table>
    </div>
  </div>
</template>

<style scoped>
.wrapper {
  display: flex;
  justify-content: space-between;
  padding: 20px;
}

.left-column, .right-column {
  flex: 1;
}

.info-table1 {
  width: 95%;
  border-collapse: collapse;
  margin-top: 20px;
}
.info-table2 {
  width: 95%;
  border-collapse: collapse;
  margin-top: 20px;
}

.info-table1 th {
  background-color: #f2f2f2;
  padding: 8px;
  text-align: left;
  border :1px solid #ddd;
  font-size: 20px;
}
.info-table2 th {
  background-color: #f2f2f2;
  padding: 8px;
  text-align: left;
  border :1px solid #ddd;
  font-size: 20px;
}

.info-table1 td {
  padding: 8px;
  border-bottom: 1px solid #ddd;
  font-size: 18px;
  border :1px solid #ddd;
}
.info-table2 td {
  padding: 8px;
  border-bottom: 1px solid #ddd;
  font-size: 18px;
  border :1px solid #ddd;
}
</style>